<template>
  <el-dialog
    title="修改电话"
    width="380px"
    :visible="value"
    :show-close="false"
    :before-close="handleCloses"
    :append-to-body="true"
    center
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" inline>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="form.phoneNumber">
          <template slot="append">
            <el-select v-model="form.phoneOwnership" :style="{ width: '100px' }" placeholder="使用人">
              <el-option
                v-for="option in phoneOwnershipOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="手机号2"
        prop="phoneNumber2"
        v-if="form.phoneNumber2 && form.phoneNumber2.length > 0"
      >
        <el-input v-model="form.phoneNumber2">
          <template slot="append">
            <el-select v-model="form.phoneOwnership2" :style="{ width: '100px' }" placeholder="使用人">
              <el-option
                v-for="option in phoneOwnershipOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { phoneOwnershipOptions } from '@/utils/options'
import { updatePerson } from '@/api/services/person'
import { getPhone } from '@/api/erp/common'
export default {
  name: 'ModifyPhone',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({
        id: 0,
        phoneOwnership: 0,
        phoneOwnership2: 0,
        phoneNumber: '',
        phoneNumber2: '',
      }),
    },
  },
  data() {
    return {
      loading: false,
      form: {
        id: 0,
        phoneNumber: '',
        phoneNumber2: '',
        phoneOwnership: 0,
        phoneOwnership2: 0,
      },
      rules: {
        phoneNumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^[0-1]\d{10}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        phoneNumber2: [
          { required: false, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^[0-1]\d{10}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        phoneOwnership: [
          { required: true, message: '电话所属关系', trigger: 'blur' },
        ],
        phoneOwnership2: [
          { required: false, message: '电话所属关系', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    phoneOwnershipOptions() {
      return phoneOwnershipOptions
    },
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.init()
      } else {
        this.$refs.form.resetFields()
      }
    },
  },
  methods: {
    /*
     *获取电话号码
     */
    async phone(params) {
      const { data } = await getPhone(params)
      return data
    },
    handleCloses() {
      if (this.value) {
        this.$emit('beforeclose', false)
      } else {
        return
      }
    },
    init() {
      let params = {
        id: this.data.id,
        type: 1,
      }
      this.phone(params).then((res) => {
        this.form = {
          id: this.data.id,
          phoneNumber: res.phoneNumber1,
          phoneNumber2: res.phoneNumber2,
          phoneOwnership: this.data.phoneOwnership,
          phoneOwnership2: this.data.phoneOwnership2,
        }
      })
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        try {
          if (!valid) {
            return
          }
          this.loading = true
          const {
            phoneNumber,
            phoneNumber2,
            phoneOwnership,
            phoneOwnership2,
          } = this.form
          const formData = {
            id: this.data.id,
            phoneNumber,
            phoneNumber2,
            phoneOwnership,
            phoneOwnership2,
          }
          await updatePerson(formData)
          this.msgSuccess('修改成功')
          this.handleClose()
          this.$emit('ok')
        } finally {
          this.loading = false
        }
      })
    },
  },
}
</script>